<template>
	<div id="mv_manage">
		<div class="container">
			<div class="handle-box">
				<el-form ref="form" :inline="true">
					<el-form-item label="">
						<el-input
							v-model="query.ids"
							clearable
							@clear="handleSearch"
							@keyup.native.enter="handleSearch"
							placeholder="ID"
							class="handle-input mr10"
						></el-input>
					</el-form-item>
					<el-form-item label="">
						<el-input
							v-model="query.importName"
							clearable
							@clear="handleSearch"
							@keyup.native.enter="handleSearch"
							placeholder="歌曲名"
							class="handle-input mr10"
						></el-input>
					</el-form-item>
					<el-form-item label="">
						<el-input
							v-model="query.actorImportName"
							clearable
							@clear="handleSearch"
							@keyup.native.enter="handleSearch"
							placeholder="歌手名"
							class="handle-input mr10"
						></el-input>
					</el-form-item>
					<el-form-item label="">
						<el-input
							v-model="query.albumImportName"
							clearable
							@clear="handleSearch"
							@keyup.native.enter="handleSearch"
							placeholder="专辑名"
							class="handle-input mr10"
						></el-input>
					</el-form-item>

					<el-form-item label="">
						<el-input
							@keyup.native.enter="handleSearch"
							clearable
							@clear="handleSearch"
							v-model="query.cppoaName"
							placeholder="CP名"
							class="handle-input mr10"
						></el-input>
					</el-form-item>

					<el-form-item label="">
						<el-select
							@change="handleSearch"
							:clearable="true"
							v-model="query.genre"
							placeholder="风格"
							class="handle-select mr10"
						>
							<el-option v-for="(item, index) in genres_3" :key="index" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="">
						<el-input
							@keyup.native.enter="handleSearch"
							clearable
							@clear="handleSearch"
							v-model="query.isrc"
							placeholder="ISRC"
							class="handle-input mr10"
						></el-input>
					</el-form-item>

					<el-form-item label="">
						<el-select
							@change="handleSearch"
							:clearable="true"
							v-model="query.status"
							placeholder="状态"
							class="handle-select mr10"
						>
							<el-option key="0" label="下线" value="0"></el-option>
							<el-option key="1" label="上线" value="1"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="">
						<el-input
							@keyup.native.enter="handleSearch"
							v-model="query.creator"
							clearable
							@clear="handleSearch"
							placeholder="操作者"
							class="handle-input mr10"
						></el-input>
					</el-form-item>

					<el-form-item label="">
						<el-button :disabled="disabled" type="primary" @click="handleSearch">
							<!-- 查询 -->
							{{ $t('m.queryBtn') }}
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column type="selection" width="55" align="center"></el-table-column>

				<el-table-column label="ID" width="auto" align="center" :show-overflow-tooltip="true">
					<template slot-scope="scope">{{ scope.row.id }}</template>
				</el-table-column>

				<el-table-column label="externalId" width="auto" align="center" :show-overflow-tooltip="true">
					<template slot-scope="scope">{{ scope.row.externalId }}</template>
				</el-table-column>

				<el-table-column label="歌曲名" width="auto" align="center" :show-overflow-tooltip="true">
					<template slot-scope="scope">{{ scope.row.importName }}</template>
				</el-table-column>
				<el-table-column label="歌手名" width="auto" align="center" :show-overflow-tooltip="true">
					<template slot-scope="scope">{{ scope.row.actors ? scope.row.actors.name : '' }}</template>
				</el-table-column>
				<el-table-column label="专辑名" width="auto" align="center" :show-overflow-tooltip="true">
					<template slot-scope="scope">{{ scope.row.tblAlbum ? scope.row.tblAlbum.name : '' }}</template>
				</el-table-column>
				<el-table-column label="CP名称" width="auto" align="center" :show-overflow-tooltip="true">
					<template slot-scope="scope">{{ scope.row.tblCppartner ? scope.row.tblCppartner.name : '' }}</template>
				</el-table-column>

				<el-table-column label="风格" width="auto" align="center" :show-overflow-tooltip="true">
					<template slot-scope="scope">{{ scope.row.genre }}</template>
				</el-table-column>

				<el-table-column label="ISRC" width="auto" align="center" :show-overflow-tooltip="true">
					<template slot-scope="scope">{{ scope.row.isrc }}</template>
				</el-table-column>

				<el-table-column width="auto" label="状态" align="center">
					<template slot-scope="scope">
						<img
							v-if="scope.row.status == 1"
							style="width: 20px; height: 20px"
							src="@/assets/images/歌曲管理/u464.png"
							alt=""
						/>
						<img
							v-else-if="scope.row.status == 0"
							style="width: 20px; height: 20px"
							src="@/assets/images/歌曲管理/u468.png"
							alt=""
						/>
					</template>
				</el-table-column>

				<el-table-column label="更新时间" width="auto" align="center" :show-overflow-tooltip="true">
					<template slot-scope="scope">{{ scope.row.updateTime }}</template>
				</el-table-column>

				<el-table-column label="MV预览" width="auto" align="center" :show-overflow-tooltip="true">
					<template slot-scope="scope">
						<!-- v-if="scope.row.tblSongfiles[0].filePath !== ''" -->
						<a
							v-if="scope.row.m3u8Path"
							@click="handleClick($event, scope.row, scope.$index)"
							style="color: black; display: inline-block; cursor: pointer; font-size: 16px"
						>
							<svg-icon
								:data_iconName="scope.row.paused ? '视频播放' : '视频暂停'"
								:className="scope.row.paused ? 'play_icon' : 'pause_icon'"
							/>
						</a>
					</template>
				</el-table-column>

				<!-- <el-table-column label="操作者" width="auto" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                </el-table-column> -->

				<!-- <el-table-column label="是否可用" width="auto" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-select placeholder="是否可用" style="width:100%; height: 100%" v-model="scope.row.id">
                            <el-option key="1" label="可用" value="可用"></el-option>
                            <el-option key="2" label="暂不可用" value="暂不可用"></el-option>
                            <el-option key="3" label="禁止使用" value="禁止使用"></el-option>
                        </el-select>
                    </template>
                </el-table-column> -->
			</el-table>
			<div class="pagination">
				<el-pagination
					background
					layout="total,sizes, prev, pager, next, jumper"
					:page-sizes="[5, 10, 20, 30]"
					@size-change="handleSizeChange"
					:current-page="query.pageIndex"
					:page-size="query.pageSize"
					:total="pageTotal"
					@current-change="handlePageChange"
				></el-pagination>
			</div>
		</div>

		<!-- MV播放弹出框 -->
		<el-dialog
			:title="playerTitle"
			:visible.sync="playerVisible"
			width="500px"
			:close-on-click-modal="false"
			:show-close="true"
			@close="handleClose_1"
		>
			<!-- <div class="videos"></div> -->
			<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="500px">
				<source src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" type="application/x-mpegURL" />
			</video>
		</el-dialog>
	</div>
</template>

<script>
	import NProgress from 'nprogress';
	import { debounce, throttle } from '@/utils/utils.js';
	import { mapGetters, mapMutations, mapActions } from 'vuex';
	import { genres_3 } from '@/components/common/';
	import axios from 'axios';

	import videojs from 'video.js';
	import 'videojs-contrib-hls';

	export default {
		name: 'MvManage',
		data() {
			return {
				disabled: false,
				genres_3,
				playerVisible: false,
				playerTitle: 'MV预览'
				// query: {
				//     address: '',
				//     name: '',
				//     pageIndex: 1,
				//     pageSize: 10
				// },
				// tableData: [],
				// pageTotal: 0
			};
		},
		// created() {
		//     this.getData();
		// },
		watch: {
			$route: {
				deep: true,
				immediate: true,
				handler(a, b) {
					if (a.name === 'MvManage') {
						if (this.tableData.length === 0) {
							this.getData();
						}
					}
				}
			}
		},
		computed: {
			...mapGetters({
				tableData: 'mvManageData',
				pageTotal: 'mvManagePageTotal',
				query: 'mvManageQuery',
				tagsList: 'tagsList',
				currentVideo: 'currentVideo',
				playlist_1: 'playlist_1',
				currentIndex_1: 'currentIndex_1'
			})
		},
		mounted() {
			// this.getVideo();
			// let _that = this;
			// setTimeout(() => {
			//     _that.getVideo();
			// }, 300);
		},
		methods: {
			getVideo() {
				let _this = this;
				videojs(
					'my-video',
					{
						bigPlayButton: false,
						textTrackDisplay: false,
						posterImage: true,
						errorDisplay: false,
						controlBar: true,
						autoplay: false,
						controls: true,
						// height: '320px',
						// width: '640px',
						loop: false,
						muted: false,
						aspectRatio: '16:9',
						notSupportedMessage: '暂无MV',
						playbackRates: [0.5, 1, 1.5, 2, 3, 4],
						controlBar: {
							fullscreenToggle: true
						},
						nativeControlsForTouch: true
					},
					function () {
						console.log(this);
						videojs.log('播放器已经准备好了!');
						// In this context, `this` is the player that was created by Video.js.<br>  // 注意，这个地方的上下文， `this` 指向的是Video.js的实例对像player
						this.play();
						// How about an event listener?<br>  // 如何使用事件监听？
						this.on('ended', () => {
							videojs.log('播放结束了!');
							// console.log(_this);
							//  后期实现
							// _this.next();
						});
					}
				);
			},
			next() {
				if (this.playlist_1.length === 1) {
				} else {
					let index = this.currentIndex_1 + 1;
					if (index === this.playlist_1.length) {
						index = 0;
						this.tableData[this.playlist_1.length - 1].paused = true;
						this.tableData[index].paused = false;
						this.SET_MVMANAGE_DATA([...this.tableData]);
						this.SET_PLAYLIST_1([...this.tableData]);
					} else {
						this.tableData[this.currentIndex_1].paused = true;
						this.tableData[index].paused = false;
						this.SET_MVMANAGE_DATA([...this.tableData]);
						this.SET_PLAYLIST_1([...this.tableData]);
					}
					// this.myPlayer.play();
				}
			},
			handleClose_1() {
				for (var i = 0, len = this.tableData.length; i < len; i++) {
					this.tableData[i].paused = true;
				}
				this.SET_MVMANAGE_DATA([...this.tableData]);
				this.SET_PLAYLIST_1([...this.tableData]);

				this.playerVisible = false;
				this.playerTitle = '';
				if (this.myPlayer) {
					// if(document.querySelector('.vjs-picture-in-picture')){}
					if (document.querySelector('#my-video').classList.contains('vjs-picture-in-picture')) {
						// 打开了画中画
					} else {
						this.myPlayer.pause();
					}
				}
			},
			handleClick(e, row, index) {
				if (this.tableData[index].paused == true) {
					for (var i = 0, len = this.tableData.length; i < len; i++) {
						if (this.tableData[index].id != this.tableData[i].id) {
							this.tableData[i].paused = true;
						}
					}
					this.tableData[index].paused = false;
				}
				this.SET_CURRENT_INDEX_1(index);
				this.SET_MVMANAGE_DATA([...this.tableData]);
				this.SET_PLAYLIST_1([...this.tableData]);

				this.playerVisible = true;
				this.$nextTick(() => {
					this.getVideo();
					this.playerTitle = '歌曲名: ' + row.importName + ' 歌手名: ' + row.actors.name;
					this.myPlayer = videojs('my-video');
					this.myPlayer.src([
						{
							type: 'application/x-mpegURL',
							// src: 'http://ivi.bupt.edu.cn/hls/gdhd.m3u8' // 广东卫视
							// src: row.tblSongfiles[0].filePath
							// src: 'https://hls.allsaintsmusic.com/m/e561e18283464b7fb43e7a956eee0224/9df81287c42d0496b3b916d0bbb10847.m3u8',
							// src: 'https://hls.allsaintsmusic.com/v/377f71f88b4a41c995578928d793e6fc/index.m3u8'
							src: row.m3u8Path
						}
					]);
					this.myPlayer.play();
					console.log(this.myPlayer);
				});

				//         var img = ''; // 获取视频预览图
				//         var video = row.tblSongfiles[0].filePath; // 获取视频路径
				//         this.$nextTick(() => {
				//             var videos = document.querySelector('.videos');
				//             videos.innerHTML = `
				//   <video id="video" poster='${img}' style='width: 100%; height: 100%; outline: none;' src="${'https://hls.allsaintsmusic.com/v/28b1222aef124eea8ebce77f1ac4428f/index.m3u8'}" preload="auto" controls="controls" autoplay="autoplay"></video>
				//   `;
				//         });
			},
			async getData() {
				try {
					let _this = this;
					this.cancelQuest();
					NProgress.start();
					this.disabled = true;
					let url = '/song/list';
					let { data: res } = await this.$http[0].get(url, {
						cancelToken: new axios.CancelToken(function executor(c) {
							_this.source = c;
						}),
						params: this.$removeField({
							page: this.query.pageIndex,
							size: this.query.pageSize,
							ids: this.query.ids.trim(),
							importName: this.query.importName.trim(),
							actorImportName: this.query.actorImportName.trim(),
							albumImportName: this.query.albumImportName.trim(),
							cppoaName: this.query.cppoaName.trim(),
							genre: this.query.genre,
							isrc: this.query.isrc,
							status: this.query.status,
							creator: this.query.creator,
							mediaType: 'video'
						})
					});

					if (res.code != '0000') {
						throw new Error(res.message);
					}
					if (res.data.content && res.data.content.length > 0) {
						res.data.content.map((item) => {
							item.paused = true;
							// if (item.tblSongfiles && item.tblSongfiles.length > 0) {
							//     item.tblSongfiles[0].filePath = `${process.env.VUE_APP_SRC1}/api/stream/audio?path=${item.tblSongfiles[0].filePath}`;
							// } else {
							//     item.tblSongfiles = [
							//         {
							//             filePath: ''
							//         }
							//     ];
							// }
							if (item.actors && item.actors.length != 0) {
								item.actors.name = '';
								item.actors.map((val) => {
									item.actors.name += val.name + '/';
								});
								item.actors.name = item.actors.name.slice(0, -1);
							} else {
								item.actors = [];
								item.actors.name = '';
							}
							item.createTime = this.$dateFormat(item.createTime, '', '-');
							item.updateTime = this.$dateFormat(item.updateTime, '', '-');
						});
						this.SET_MVMANAGE_DATA(res.data.content);
						this.SET_MVMANAGE_PAGETOTAL(res.data.totalElements);
						var tempQuery = { ...this.query };
						this.$set(tempQuery, 'show', false);
						this.SET_MVMANAGE_QUERY(tempQuery);

						// this.setPlayList(res.data.content);
					} else {
						this.SET_MVMANAGE_DATA([]);
						this.SET_MVMANAGE_PAGETOTAL(0);
						var tempQuery = { ...this.query };
						this.$set(tempQuery, 'show', false);
						this.SET_MVMANAGE_QUERY(tempQuery);

						// this.setPlayList([]);
					}

					NProgress.done();
					this.disabled = false;
				} catch (err) {
					this.SET_MVMANAGE_DATA([]);
					this.SET_MVMANAGE_PAGETOTAL(0);
					var tempQuery = { ...this.query };
					this.$set(tempQuery, 'show', false);
					this.SET_MVMANAGE_QUERY(tempQuery);
					console.dir(err);
					NProgress.done();
					this.disabled = false;
					this.$message.error({
						message: err.message,
						duration: 1500
					});
				}
			},
			cancelQuest() {
				if (typeof this.source === 'function') {
					this.source('终止请求');
				}
			},
			...mapMutations({
				SET_MVMANAGE_DATA: 'SET_MVMANAGE_DATA',
				SET_MVMANAGE_PAGETOTAL: 'SET_MVMANAGE_PAGETOTAL',
				SET_MVMANAGE_QUERY: 'SET_MVMANAGE_QUERY',
				SET_CURRENT_INDEX_1: 'SET_CURRENT_INDEX_1',
				SET_PLAYLIST_1: 'SET_PLAYLIST_1'
			}),
			// 触发搜索按钮
			// handleSearch() {
			//     this.$set(this.query, 'pageIndex', 1);
			//     this.getData();
			// },

			handleSearch: debounce(function () {
				this.$set(this.query, 'pageIndex', 1);
				this.getData();
			}, 300),

			// 删除操作
			handleDelete(index, row) {
				// 二次确认删除
				this.$confirm('确定要删除吗？', '提示', {
					type: 'warning'
				})
					.then(() => {
						this.$message.success('删除成功');
						this.tableData.splice(index, 1);
					})
					.catch(() => {});
			},
			// 分页导航
			handlePageChange(val) {
				this.$set(this.query, 'pageIndex', val);
				this.getData();
			},
			handleSizeChange(val) {
				this.$set(this.query, 'pageSize', val);
				this.getData();
			}
		}
	};
</script>

<style lang="scss">
	#mv_manage {
		.el-dialog__wrapper {
			// width: 640px;
			// position: absolute;
			// left: 50%;
			// transform: translate(-50%, 0);

			// top: 50%;
			// left: 50%;
			// transform: translate(-50%, -50%);

			.el-dialog {
				width: 640px !important;
				.el-dialog__body {
					width: 640px;
					height: 320px;
					box-sizing: border-box;
					padding: 0;
					// .videos {
					//     z-index: 100;
					//     width: 100%;
					//     height: 100%;
					//     background-color: #0f0;
					// }
					#my-video {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		// position: relative;

		.table-header {
			.cell {
				white-space: nowrap !important;
			}
		}
		.handle-box {
			margin-bottom: 20px;
			.el-form {
				display: grid;
				grid-auto-flow: column;
				justify-content: flex-start;
				.el-form-item {
					width: 95%;
					.el-form-item__content {
						.el-select,
						.handle-input {
							width: 100%;
						}
					}
				}
			}
		}

		// .handle-input {
		//     width: 120px;
		//     display: inline-block;
		// }
		.table {
			width: 100%;
			font-size: 14px;
			.play_icon,
			.pause_icon {
				width: 43px;
				height: 37px;
			}
		}
		.red {
			color: #ff0000;
		}
		.mr10 {
			margin-right: 10px;
		}
		.table-td-thumb {
			display: block;
			margin: auto;
			width: 40px;
			height: 40px;
		}
	}
</style>
